<template>
  <div id="school">
    <h1 ref="title">{{ name }}</h1>
    <h2 ref="age">{{ age }}</h2>
    <button @click="add" ref="add">点击显示</button>
<!--    <Students name="张三" :age="20" sex="男"></Students>-->
    <Students name="李四" sex="女" ref="student"></Students>
    <Classes class-name="嘉兴班级争取第一" @getName="getName"></Classes>
    <ul>
      <li v-for="item in messagesList" :key="item.id">
<!--        <router-link :to="`/school/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>-->
        <router-link :to="{
          // path:'/school/detail',
          name:'detail',
          query:{id:item.id,title:item.title}
        }">{{item.title}}</router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
/**
 * ref属性
 * 1. 被用来给元素或组件注册引用信息(ID的替代者)
 * 2. 应用在HTML标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象
 * 3. 使用方式
 *   - 打标识  <h2 ref="age">{{age}}</h2>
 *   - 使用 this.$refs.age
 */
import Students from "./Students";
import Classes from "./Classes";
export default {
  name: "School",
  components: {Students,Classes},
  data() {
    return {
      name: "玉石",
      age: 20,
      messagesList:[
        {id:'001',title:"消息001"},
        {id:'002',title:"消息002"},
        {id:'003',title:"消息003"},
      ]
    }
  },
  mounted() {
    this.$refs.student.$on('getname',this.getName2)
  },
  activated() {
    console.log("school组件激活了")
  },
  deactivated() {
    console.log("school组件失活了")
  },
  methods: {
    getName2(n){
      console.log(n)
    },
    add() {
      console.log(this.$refs)
    },
    getName(name){
      console.log(name)
    }
  }
}
</script>

<style scoped>

</style>
